<!DOCTYPE HTML>
<head>
	<meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    <meta name="description" content="Pagina web de cine" />
    <meta name="keywords" content="peliculas, estrenos,cine, actualidad, panoramas" />
    <meta name="author" content="CodecsCinema" />
        
     <script type="text/javascript" src="js/estilos.js" ></script>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="js/jquery.gridnav.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
    <script type="text/javascript" src="js/consultas.js">  </script>
    <link id="css1" rel="stylesheet" type="text/css" href="css/styleSlide.css" />
	<link id="css2" rel="stylesheet" type="text/css" href="css/gridNavigation.css" />    
	<link id="css3" href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
	<link id="css4" href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />		        
    <link id="css5" rel="stylesheet" href="css/principal1.css"/>
    <link id="css6" href="css/main.css" rel="stylesheet" type="text/css" />
    <link id="css7" href="css/transition.css" type="text/css" media="all" rel="stylesheet" />
    <link id="css8" type="text/css" href="css/menu.css" rel="stylesheet" />   
    	<title>Teatro</title>
    <script type="text/javascript">
			$(function() {
				$('#tj_container').gridnav({
					type	: {
						mode		: 'sequpdown', 	// use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
						speed		: 400,			// for fade, seqfade, updown, sequpdown, showhide, disperse, rows
						easing		: '',			// for fade, seqfade, updown, sequpdown, showhide, disperse, rows	
						factor		: 50,			// for seqfade, sequpdown, rows
						reverse		: false			// for sequpdown
					}
				});
			});
		</script>
       
</head>

<body onload="funcionteatro(),estilo1()">
    <header id="cabecera" class="page">
               
                <figure id="logo">
                    <img src="images/logo1.gif" alt="logo"  />                                        
                </figure>
                 <a class="ml" href="#" onclick="estilo1()">Estilo1</a>
                <a class="ml" href="#" onclick="estilo2()">Estilo2</a>
               
                
               <nav id="menu">
                    <ul class="menu">
                        <li><a href="../index.htm" ><span>Inicio</span></a></li>
                        <li><a href="../pelicula/pelicula.html" ><span>Pelicula</span></a></li>
                        <!--li><a href="#" class="parent"><span>Buscar</span></a>
                            <div><ul>
                                <li><a href="#"><span>Por nombre pelicula</span></a></li>
                                <li><a href="#"><span>Por categoria</span></a></li>
                                <li><a href="#"><span>Por nombre director</span></a></li>
                            </ul></div>
                        </li-->
                        <li class="last"><a href="index.htm"><span>Contactanos</span></a></li>
                       
                    </ul>
                </nav>
    
                
       
            </header>
             <h1 id="mtitulo" class="salateatro">Cartelera:San Marino</h1>
               
    <div class="clear"></div>
    <div class="global">
        
    
    <div id="animacion" >
    
   <div class="containera">
		
			<div class="content example5">
				<div id="tj_container" class="tj_container">
					<div class="tj_nav">
						<span id="tj_prev" class="tj_prev">Previous</span>
						<span id="tj_next" class="tj_next">Next</span>
					</div>
					<div class="tj_wrapper">
						<ul class="tj_gallery">
							<li><a href="../pelicula/pelicula.html"><img src="images/1.jpg" alt="image01" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/2.jpg" alt="image02" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/3.jpg" alt="image03" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/4.jpg" alt="image04" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/5.jpg" alt="image05" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/6.jpg" alt="image06" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/7.jpg" alt="image07" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/8.jpg" alt="image08" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/9.jpg" alt="image09" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/10.jpg" alt="image10" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/11.jpg" alt="image11" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/12.jpg" alt="image12" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/13.jpg" alt="image13" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/14.jpg" alt="image14" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/15.jpg" alt="image15" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/16.jpg" alt="image16" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/17.jpg" alt="image17" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/18.jpg" alt="image18" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/19.jpg" alt="image19" /></a></li>
							<li><a href="../pelicula/pelicula.html"><img src="images/20.jpg" alt="image20" /></a></li>
						</ul>
					</div>
				</div>
			</div>
			
		</div>

    </div>
     <div class="clear"></div>
     
    <article id="cuerpo">
        <div class="alado">
    
            <aside id="parametros">
            <b>Personaliza Busqueda</b><br /><br /><br />
                <form id="formulario" >
                    <label>Elige la Ciudad:</label><br />
                    <select>
                        <option> Esta Ciudad</option>
                        <option> Guayaquil</option>
                        <option>Quito</option> 
                        <option>Cuenca</option> 
                    </select><br />
                    <label>Elige el Teatro:</label><br />
                    <select>
                        <option> Esta Teatro</option>
                        <option> Teatro 1</option>
                        <option>Teatro 2</option> 
                        <option>Teatro 3</option> 
                    </select><br />
                    
                    <label>Pelicula:</label><br />
                    <select>
                        <option> American Pie El Retorno</option>
                        <option>Prometeus</option> 
                        <option>La era del Hielo 4</option>
                    </select><br /><br />
                    <label>Buscar por Pelicula:</label><br />
                    <input type="text"/><br />
                    <label>Fecha:</label><br />
                    <input type="text"/><br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button>Buscar</button>
                    
                </form>
            </aside>
            
            
             <section id="info2">                    
                    <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
                    <script>
                    new TWTR.Widget({
                      version: 2,
                      type: 'profile',
                      rpp: 4,
                      interval: 30000,
                      width: 250,
                      height: 300,
                      theme: {
                        shell: {
                          background: '#333333',
                          color: '#ffffff'
                        },
                        tweets: {
                          background: '#000000',
                          color: '#ffffff',
                          links: '#4aed05'
                        }
                      },
                      features: {
                        scrollbar: false,
                        loop: false,
                        live: true,
                        behavior: 'all'
                      }
                    }).render().setUser('CodecsCinema').start();
                    </script>
                    
                    <div class="fb-facepile" data-href="https://www.facebook.com/CodecsCinema" data-max-rows="1" data-width="250" data-colorscheme="dark"></div>
                
                </section>
             </div>
            <div id="info">
                <h2 class="cartelera">Cartelera</h2>
            </div>
          
           
                              
                  <div class="clear"></div>
    </article>
      <div class="clear"></div>
    </div>
    
    
    <aside id="redesSociales" >
         <nav>
				<ul>
				<li><a class="f" id="fb" href="#"><img src="img/facebook_icon.jpg" alt="facebook" width="30" height="30"/></a></li>
				<li><a class="f" id="t" href="#"><img src="img/twiter_icon.jpg" alt="twitter" width="30" height="30" /></a></li>
				<li><a class="f" id="gp" href="#"><img src="img/google_plus_icon.jpg" alt="googleplus" width="30" height="30"/></a></li>
				</ul>
			</nav>
    </aside>
    <div class="clear"></div>
    <footer id="pie" >
    <nav id="menu2" class="global" >
			<ul>
				<li><a href="index.htm" ><span>Inicio</span></a></li>
				<li><a href="pelicula.htm" ><span>Pelicula</span></a></li>
				<li class="last"><a href="index.htm"><span>Contactanos</span></a></li>
				<li><a href="index.htm"><span>Login</span></a></li>
				<li><a href="index.htm"><span>Registro</span></a></li>                                
				
			</ul>
		</nav>
            Grupo DAW-ESPOL
    </footer>

</body>
</html>